<!DOCTYPE html>
<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
     KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport"
	content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />

<meta name="msapplication-tap-highlight" content="no" />

<!-- FRAMEWORK -->
<script src=" js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src=" js/highcharts.src.js" type="text/javascript"></script>
<script src=" js/highcharts-more.js" type="text/javascript"></script>
<script src=" js/jquery-ui.js" type="text/javascript"></script>

<script type="text/javascript" src="js/myfunctions.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=visualization"></script> <!-- Google MAPS -->

<!-- FONT -->
<link href="css/importedFont.css" rel="stylesheet" type="text/css">
<title>Hi-Cosy</title>
</head>
<body>
	<div id="loadingWindow" class="disable">
		<div id="loadingGif">
			<img src="img/ajax_loader_gray_512.gif" />
		</div>
	</div>
	
	<!-- SCHERMATA DI LOGIN -->
	<div class="myApp login">
		<div  class="img_logo">
			<img src="img/logowhite.png" />
		</div>
		<div id="contLogin">
			<label class="labelLogin lang it">Username</label>
			<label class="labelLogin lang en">Username</label>
			<input type="text" name="username" id="username" class="loginField" />
			<label class="labelLogin password">Password</label>
			<input type="password" name="password" id="password" class="loginField" /> 
<!-- 			<input type="button" name="3" id="buttonLogin" value="Login" /> -->
			<div class="iconButtonStyle" id="buttonLogin">Login</div>
		</div>
		<div class="rememberPassword">
			<label class="tinyText lang it">Ricorda password</label>
			<label class="tinyText lang en">Remember me</label>
			<input type="checkbox" name="4" id="rememberMe" />
		</div>
		<div class="iconButtonStyle" id="buttonLocale">
			<span class="lang it">Accedi in locale</span>
			<span class="lang en">Local Access</span>
		</div>
	</div>


	<!-- QUI VANNO INSERITI IN SERIE TUTTI I TITOLI -->
	<div class="myApp mainMenu title">
		<h1 class="title lang it">Menu Principale</h1>
		<h1 class="title lang en">Main Menu</h1>
	</div>
	
	
	<div class="myApp userInformation title with-back">
		<div class="backButtonStyle backHome">
			<img src="img/back-arrow.png" />
		</div>
		<h1 class="title lang it">Anagrafica utente</h1>
		<h1 class="title lang en">User information</h1>
	</div>

	<div class="myApp measure title with-back">
		<div id="backHome" class="backButtonStyle backHome">
			<img src="img/back-arrow.png" />
		</div>
		<h1 class="title lang it">Tutti i kit</h1>
		<h1 class="title lang en">All systems</h1>
	</div>
	
	
	<div class="myApp systemTitle title with-back">
		<div id="backHome" class="backButtonStyle backHome">
			<img src="img/back-arrow.png" />
		</div>
		<h1 id="sysName" class="title systemTitle">Nome Impianto</h1>
	</div>

	<div class="myApp alarm title with-back">
		<div id="backHome" class="backButtonStyle backHome">
			<img src="img/back-arrow.png" />
		</div>
		<h1 class="title lang it">Allarmi</h1>
		<h1 class="title lang en">Alarm</h1>
	</div>

	<div class="myApp system title with-back">
		<div id="backHome" class="backButtonStyle backHome">
			<img src="img/back-arrow.png" />
		</div>
		<h1 class="title lang it">Impianti</h1>
		<h1 class="title lang en">Systems</h1>
	</div>
	
	<div class="myApp realExpected title with-back">
		<div id="backHome" class="backButtonStyle backHome">
			<img src="img/back-arrow.png" />
		</div>
		<h1 class="title lang it">Produzione</h1>
		<h1 class="title lang en">Production</h1>
	</div>
	
	<div class="myApp economics title with-back">
		<div id="backHome" class="backButtonStyle backHome">
			<img src="img/back-arrow.png" />
		</div>
		<h1 class="title lang it">Analisi Economica</h1>
		<h1 class="title lang en">Economics</h1>
	</div>

	<!-- FINE DEI TITOLI INSERITI -------------------->

	<div class="curvone curvoneTop"></div>
	<div class="main">

		<!-- QUI VANNO INSERITE IN SERIE TUTTE LE SCHERMATE -->

		<div class="myApp mainMenu data">
			<div id="userButton" class="menuIcons">
				<img class="iconButtonStyle" src="img/user-icon.png" />
				<span class="lang it">Anagrafica utente</span>
				<span class="lang en">User information</span>
			</div>
			<div id="measureButton" class="menuIcons">
				<img class="iconButtonStyle" src="img/Charts-Combo-orange.png" />
				<span class="lang it">Tutti i kit</span>
				<span class="lang en">All systems</span>
			</div>
			<div id="alarmButton" class="menuIcons">
				<img class="iconButtonStyle" src="img/Easter-Bell-icon.png" />
				<div class="notificationBox">
					<div class="numberNotification">1</div>
				</div>
				
				<span class="lang it">Allarmi</span>
				<span class="lang en">Alarm</span>		
			</div>
			<div id="systemButton" class="menuIcons">
				<img class="iconButtonStyle" src="img/Industry-Solar-panel-icon.png" />
				<span class="lang it">Impianti</span>
				<span class="lang en">Systems</span>
			</div>
			<div id="productionButton" class="menuIcons">
				<img class="iconButtonStyle"  src="img/spina.png" />
				<span class="lang it">Produzione</span>
				<span class="lang en">Production</span>
			</div>
			
			<div id="economicsButton" class="menuIcons">
				<img class="iconButtonStyle"  src="img/coin-money-6.png" />
				<span class="lang it">Analisi economica</span>
				<span class="lang en">Economics</span>
			</div>
			

			<div class="menuBanner">
				<img src="img/logonega_20.png" />
			</div>
			
			<div id="logoutButton" class="menuIcons iconLogout">
				<img class="iconButtonStyle"   src="img/exit-close.png" />
			</div>
						
		</div>
		
		
		<div class="myApp userInformation data">
			<span class="labelInfo lang it">Nome Utente:</span><span class="labelInfo lang en">User:</span>
			<span id="usrDisplayName" class="dataInformation"></span>
			<span class="labelInfo lang it">Indirizzo E-mail:</span><span class="labelInfo lang en">E-mail Address:</span>
			<span id="usrDisplayEmail" class="dataInformation"></span>
			<span class="labelInfo lang it">Data registrazione:</span><span class="labelInfo lang en">Registration date:</span>
			<span id="usrDisplayDate" class="dataInformation"></span>
		</div>

		<div class="myApp measure measureMac data">
	
				<div class="selectType">
					<div class="lang it">Tipo di misura</div>
					<div class="lang en">Type of measure</div>
					
					<div id="powerButton" class="measureButton orangeButton" name="grid_power">
						<span class="lang it">Potenza</span>
						<span class="lang en">Power</span>
					</div>
					
					<div id="voltageButton" class="measureButton orangeButton" name="grid_voltage">
						<span class="lang it">Voltaggio</span>
						<span class="lang en">Voltage</span>
					</div>
					
					<div id="currentButton" class="measureButton orangeButton" name="grid_current">
						<span class="lang it">Corrente</span>
						<span class="lang en">Current</span>
					</div>


				</div>
				
			<div id="datepicker" class="selectDate"></div>
			
			<div class="showChart">
				<div id="grafic-box"></div>
			</div>

			<div class="macList">
				<div id="leftArrow" class="arrow"><img src="img/orange-left-arrow.png" /></div>
				<div class="listContainer">
					<select id="macList">
					</select>
				</div>
				<div id="rightArrow" class="arrow"><img id="tomorrowArrow" src="img/orange-right-arrow.png" /></div>				
			</div>
			
			<div id="dateActive" class="orangeButton"></div>

			

			<div class="navBar">
				<div id="refreshIcon" class="navBarIcon iconButtonStyle"><img src="img/refresh-orange.png" /></div>
				<span id="dayItem" class="firstItem anItem lang it selectedItem" name="day">Giorno</span>
				<span id="dayItem" class="firstItem anItem lang en selectedItem" name="day">Day</span>
				<span class="middleItem anItem lang it" name="month">Mese</span>
				<span class="firstItem anItem lang en" name="month">Month</span>
				<span class="lastItem anItem lang it" name="year">Anno</span>
				<span class="firstItem anItem lang en" name="year">Year</span>
				<div class="navBarIcon iconButtonStyle"><img id="gearButton" src="img/speedometer.png" /></div>
														       			<!-- src="img/gear.png" -->
			</div>

		</div>
		<!-- END DI MISURE  -->


	
	<div class="myApp alarm data">
		<div class="showChart">
			<div id="alarmGraph"></div>
		</div>
		
		<div class="macList">
			<div id="alarmPrevDate" class="arrow"><img src="img/orange-left-arrow.png" /></div>
			<div class="listContainer">
				<select id="selectAlarmKit">
				</select>
			</div>
			<div id="alarmNextDate" class="arrow"><img id="tomorrowArrow" src="img/orange-right-arrow.png" /></div>				
		</div>
		
		<div id="dateActiveAlarm" class="orangeButton"></div>
	
<!-- 		<div class="listContainer"><select class="kitVersus" id="selectAlarmKit"></select> -->
<!-- 		</div> -->
	</div>


		<div class="myApp system data">
			<div id="systemList" class="systemList">
				<div class="elementList"></div>				
			</div>
		</div>



	</div>
	
	
	<div class="myApp realExpected data">
		<div class="showChart">
			<div id="productionBudget"></div>
		</div>
	
		<div class="listContainer"><select class="plantVersus" id="selectProduction"></select>
		</div>
	</div>
	
	<div class="myApp economics data">
		<div class="showChart">
			<div id="economicsGraph"></div>
		</div>
	
		<div class="listContainer"><select class="plantVersus" id="selectEconomics"></select>
		</div>
	</div>

	
	
	<!-- END DI MAIN -->

	<!-- FINE DELLE SCHERMATE INSERITE ------------------->

	</div>
	<div class="curvone curvoneBot"></div>
	<div class="footer curvone"></div>
	
	<script src="js/jquery.touchSwipe.min.js"></script>
	<script src="js/drilldown.js" type="text/javascript"></script>
	
	<!-- RICHIAMA CORDOVA -->
	<script type="text/javascript" src="cordova.js"></script>
	<script type="text/javascript" src="js/index.js"></script>
	<script type="text/javascript">
            app.initialize();
    </script>
</body>
</html>
